@import '@/styles/utils.scss';
@import '@/styles/colors.scss';

.item {
  display: flex;
  padding: px2rem(20) 0;
  border: 1px solid #ddd;

  .checkbox {
    margin: px2rem(40) px2rem(20);
  }

  .image {
    width: px2rem(100);
    height: px2rem(100);
  }

  .body {
    margin-left: px2rem(20);
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .title {
      color: $fontBlack;
      font-size: px2rem(14);
      line-height: px2rem(14);
      margin-top: px2rem(10);
      width: 248px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &:hover {
        color: $mainGold;
      }
    }

    .specs {
      display: flex;
      color: #999;
      padding-top: px2rem(9);
      line-height: px2rem(16);
      text-align: left;
      font-size: px2rem(12);

      .spec {
        margin-right: px2rem(6);
      }
    }
  }

  .price {
    margin-top: px2rem(10);
    margin-left: px2rem(100);
    font-size: px2rem(14);
    color: $fontBlack;
    line-height: px2rem(14);
  }

  .quantity {
    display: flex;
    align-items: flex-start;
    margin-left: px2rem(130);
    margin-top: px2rem(10);
  }

  .totalPrice {
    color: #d4282d;
    font-size: px2rem(14);
    line-height: px2rem(14);
    margin-top: px2rem(10);
    margin-left: px2rem(100);
  }

  .del {
    margin-left: px2rem(60);
    margin-top: px2rem(10);
    color: #666;
    font-size: 14px;
    line-height: px2rem(14);
    cursor: pointer;

    &:hover {
      color: $mainGold;
    }
  }
}
